<template>
        <div>
            <!-- <div class="brand" style="height:40px;position:relative;background-color:#E5E9EC;">
                <breadcrumb :arrayName="brand" :hasIcon="hasIcon"></breadcrumb>
            </div> -->
            <el-row class="search">
                <div class="search-collapse">
                    <!-- <el-input :placeholder="$t('adt.task_des')" v-model="keysword" size="small" class="search-box"  ></el-input>
                    <el-button size="small" slot="append" @click="commonSearch" icon="el-icon-search" class="btn-default search-btn"    ></el-button> -->
                    <el-input :placeholder="$t('adt.task_des')" v-model="keysword" class="search-box"  >
                      <el-button slot="append" icon="el-icon-search" @click="commonSearch"></el-button>
                    </el-input>
                </div>
                <el-collapse class="search-collapse-content" @change="advanceSearch"  accordion>
                    <el-collapse-item>

                        <template slot="title" class="search-collapse-title" >
                            <span class="vertical-bar"></span>&nbsp;&nbsp;
                            <span class="title-font" >{{$t(advSearch)}}</span>
                        </template>

                        <!-- 高级搜索具体内容 -->
                        <el-row :gutter="10" class="row-search" >
                            <el-col :span="2">
                                <label class="label-search">{{$t('adt.task_des')}}:</label>
                            </el-col>
                            <el-col :span="6">
                                <el-input   class="input-small" v-model="taskDes"></el-input>
                            </el-col>

                            <el-col :span="2">
                                <label class="label-search">{{$t('adt.send_time')}}:</label>
                            </el-col>
                            <el-col :span="6">
                              <el-date-picker
                                class="timeform"
                                v-model="startTime"
                                type="daterange"
                                unlink-panels  
                                :range-separator="$t('ndt.to')"
                                :start-placeholder="$t('ndt.begin_time')"
                                :end-placeholder="$t('ndt.end_time')">
                              </el-date-picker>
                                <!-- <el-date-picker
                                        class="input-small timeform"
                                        v-model="startTime"
                                        type="daterange"
                                        :range-separator="$t('ndt.to')"
                                        :start-placeholder="$t('ndt.begin_time')"
                                        :end-placeholder="$t('ndt.end_time')">
                                </el-date-picker> -->
                            </el-col>

                        </el-row>

                        <!-- <el-row :gutter="10" class="row-search">
                        </el-row> -->

                        <!-- 查询和重置按钮-->
                        <el-row :gutter="10" class="row-search">
                            <div class="btn-group-search">
                                <el-col :span="2">&nbsp;</el-col>
                                <el-col :span="6">
                                    <el-button type="primary" class="btn-default" @click="search"  size="small">{{$t('adt.query')}}</el-button>
                                    <el-button class="btn-second" style="margin:0;" @click="resetData"  size="small" >{{$t('adt.reset')}}</el-button>
                                </el-col>

                            </div>
                        </el-row>
                    </el-collapse-item>

                </el-collapse>
            </el-row>

            <div style="height:15px;background-color:#F1F1F1;"></div>


                
            <el-row class="table-body">
                <el-table  :data="tables" class="no_line table-default" fixed >
                    <el-table-column :label="$t('ndt.proc_pic')" width="80"  >
                        <template slot-scope="scope" >
                            <i style="cursor:pointer;" class="fa fa-file-powerpoint-o" @click="showProcPic(scope.row)" ></i>
                        </template>
                    </el-table-column>
                    <el-table-column type="index" :label="$t('cm.no')" width="55" ></el-table-column>
                    <el-table-column  :label="$t('ndt.task_des')" width="200" show-overflow-tooltip  >
                        <template slot-scope="scope" >
                            <a   @click="editProcInst(scope.row)">{{scope.row.folio}}</a>
                                <!-- <router-link :to="{path:'/need_deal_task_details/'+scope.row.procInstID ,query:{obj:scope.row } }" ></router-link> -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="activityName" :label="$t('ndt.nowTask')"></el-table-column>
                    <el-table-column prop="processName" :label="$t('ndt.procName')"></el-table-column>

                    <el-table-column  prop="startUserCN" :label="$t('ndt.originator')"  ></el-table-column>
                    <el-table-column  prop="processStartTime" :label="$t('ndt.launch_time')" width="160"  ></el-table-column>
                    <!-- <el-table-column  prop="lastDealMan" :label="$t('ndt.deal_man')"  ></el-table-column> -->
                    <!-- <el-table-column  prop="lastDealTime" :label="$t('ndt.deal_time')" width="160"   ></el-table-column> -->
                    <!-- <el-table-column  prop="lastApproveSuggest" :label="$t('ndt.deal_des')"  ></el-table-column> -->
                    <el-table-column  :label="$t('ndt.operate')">
                        <template slot-scope="scope" >
                                <el-button  type="text" size="small" @click="editProcInst(scope.row)" >{{$t('ndt.deal')}}</el-button>
                                <!-- <el-button  type="text" size="small" @click="deleteProcInst(scope.row.procInstID)" >{{$t('ndt.delete')}}</el-button> -->
                        </template>
                    </el-table-column>


                </el-table>
            </el-row>

            <el-row class="table-bottom">
                <el-pagination
                        @size-change="changeSize"
                        @current-change="changeCurrentPage"
                        @prev-click="prePage"
                        @next-click="nextPage"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-row>
    
    

        </div>
    
    </template>
    
    <script>
        import need_deal_list2 from './js/need_deal_list2.js'
        export default need_deal_list2
    </script>
    
    <style lang="scss">
    .timeform{
      .el-range__icon {
        line-height: 40px !important;
      }
      height:40px;
      width:320px !important;
    }
    
    
    
    </style>
    